<template>
  <div>
    <el-page-header @back="$router.back()" :content="$route.name"/>
    <el-main style="margin-top: 20px">
      <el-form inline label-position="left">
        <el-form-item>
          <el-form-item label="用户编号" style="margin-right: 60px">
            <div>
              <el-input style="width: 200px; margin-right: 20px"
                        v-model.number="id"
                        clearable
                        @keyup.enter.native="getItem(1)"/>
              <el-button
                  @click="getItem(1)"
                  type="primary"
                  icon="el-icon-search">查询
              </el-button>
            </div>
          </el-form-item>
          <el-form-item label="手机号码">
            <div>
              <el-input style="width: 200px; margin-right: 20px"
                        v-model.number="mobileNumber"
                        clearable
                        @keyup.enter.native="getItem(2)"/>
              <el-button
                  @click="getItem(2)"
                  type="primary"
                  icon="el-icon-search">查询
              </el-button>
            </div>
          </el-form-item>
        </el-form-item>
      </el-form>
    </el-main>
    <el-card>
      <div v-if="item">
        <el-form inline>
          <el-form-item style="width: 250px;" label="用户编号:">
            <span style="float: right;">{{item.id}}</span>
          </el-form-item>
          <el-form-item style="width: 250px;" label="手机号码:">
            <span style="float: right;">{{item.mobileNumber}}</span>
          </el-form-item>
        </el-form>
        <el-form inline>
          <el-form-item style="width: 250px;" label="用户名:">
            <span style="float: right;">{{item.name}}</span>
          </el-form-item>
          <el-form-item style="width: 250px;" label="当前权限:">
            <span style="float: right;">{{userTypeLabel}}({{jurisdiction}})</span>
          </el-form-item>
          <el-form-item label="角色设置">
            <el-select v-model="selectType">
              <el-option v-for="item in userTypeList"
                         :key="item.value"
                         :value="item.value"
                         :label="item.label"/>
            </el-select>
            <el-button style="margin-left: 20px"
                       @click="setType"
                       type="success">确认
            </el-button>
            <el-button style="margin-left: 20px"
                       @click="selectType=item.type">重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-else>
        暂无该用户
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Auth",
  data() {
    return {
      id: '',
      mobileNumber: '',
      item: '',
      userTypeList: this.$store.state.userTypeList,
      selectType: 0,
    }
  },
  computed: {
    userTypeLabel() {
      return this.userTypeList[this.item.type - 1].label
    },
    jurisdiction() {
      return this.userTypeList[this.item.type - 1].jurisdiction
    }
  },
  methods: {
    setType() {
      if (this.selectType !== this.item.type) {
        const label = this.userTypeList[this.selectType - 1].label
        this.$confirm('是否要将该用户设置为'
            + label + '?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.put(this.$serverUrl
              + '/user/updateType',
              {
                id: this.item.id,
                attribute: this.selectType
              })
              .then(response => {
                const rtn = response.data
                if (rtn) {
                  this.$message.success('设置成功!')
                  this.item.type = this.selectType
                } else this.$message.error('设置失败!')
              })
              .catch(error => {
                console.log(error)
                this.$message.error('设置失败!')
              })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    },
    get(m) {
      const url = this.$serverUrl + '/user/get' + m
          + (m === 1 ? '?id=' + this.id
              : '?mobileNumber=' + this.mobileNumber)
      this.$axios.get(url)
          .then(response => {
            if (response.data) {
              console.log(response.data);
              const item = response.data
              this.item = item
              this.id = item.id
              this.mobileNumber = item.mobileNumber
              this.selectType = item.type
            } else {
              this.$message({
                showClose: true,
                message: "暂无该用户信息!",
                type: "warning"
              })
              this.item = ''
              if (m === 1) this.mobileNumber = ''
              else this.id = ''
            }
          })
          .catch(error => {
            console.log(error)
            this.$message.error('查询失败!');
          })
    },
    getItem(m) {
      let value = this.id
      let label = '用户编号'
      if (m === 2) {
        value = this.mobileNumber
        label = '手机号码'
      }
      if (value === '') {
        this.$message.warning(label + '不能为空!')
      } else if (!Number.isInteger(value)) {
        this.$message.warning(label + '必须为数字值!')
      } else {
        if (m === 1) {
          const val = Number(value)
          if (val < 0 || val > 2147483647) {
            this.$message.warning('用户编号范围有误!')
          } else this.get(1)
        } else {
          this.get(m)
        }
      }
    },
  }
}
</script>

<style scoped>
</style>